<%@ include file="../common/top.jsp"%>


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/myaccount.css">
    <script src="https://kit.fontawesome.com/5a681e6fdb.js" crossorigin="anonymous"></script>
    <script src="js/jquery-3.6.2.min.js"></script>
    <title>我的账户</title>
</head>

<body>
<div class="w">
    <div class="userinfo">
        <div class="userinfo-title">My Account</div>
        <div class="userinfo-info">
            <div class="userinfo-item">
                <label class="userinfo-item-icon">
                    <i class="fa-solid fa-user"></i>
                </label>
                <label class="userinfo-item-tag">
                    Name:
                </label>
                <label class="userinfo-item-var" id="username">
                    ${sessionScope.loginAccount.username}
                </label>
                <input type="text" class="input-fix" id="fix-username" name="username" />
            </div>
            <div class="userinfo-item">
                <label class="userinfo-item-icon">
                    <i class="fa-solid fa-signature"></i>
                </label>
                <label class="userinfo-item-tag">
                    First Name:
                </label>
                <label class="userinfo-item-var" id="first-name">
                    ${sessionScope.loginAccount.firstName}
                </label>
                <input type="text" class="input-fix" id="fix-firstname" name="firstname" />
            </div>
            <div class="userinfo-item">
                <label class="userinfo-item-icon">
                    <i class="fa-solid fa-signature"></i>
                </label>
                <label class="userinfo-item-tag">
                    Last Name:
                </label>
                <label class="userinfo-item-var" id="second-name">
                    ${sessionScope.loginAccount.lastName}
                </label>
                <input type="text" class="input-fix" id="fix-secondname" name="lastname" />
            </div>
            <div class="userinfo-item">
                <label class="userinfo-item-icon">
                    <i class="fa-solid fa-envelope"></i>
                </label>
                <label class="userinfo-item-tag">
                    Email:
                </label>
                <label class="userinfo-item-var" id="email">
                    ${sessionScope.loginAccount.email}
                </label>
                <input type="text" class="input-fix" id="fix-email" name="email" />
            </div>
            <div class="userinfo-item">
                <label class="userinfo-item-icon">
                    <i class="fa-solid fa-earth-americas"></i>
                </label>
                <label class="userinfo-item-tag">
                    Country:
                </label>
                <label class="userinfo-item-var" id="country">
                    ${sessionScope.loginAccount.country}
                </label>
                <select class="input-fix" id="fix-country" name="country">
                    <option value="China" select="selected">China</option>
                    <option value="England">England</option>
                    <option value="America">America</option>
                    <option value="Russia">Russia</option>
                    <option value="France">France</option>
                </select>
            </div>
            <div class="userinfo-item">
                <label class="userinfo-item-icon">
                    <i class="fa-solid fa-map-location-dot"></i>
                </label>
                <label class="userinfo-item-tag">
                    State:
                </label>
                <label class="userinfo-item-var" id="state">
                    ${sessionScope.loginAccount.state}
                </label>
                <select class="input-fix" id="fix-state" name="state">
                    <option value="">--请选择--</option>
                    <!-- <option value="Anhui">Anhui</option>
                    <option value="Beijing">Beijing</option>
                    <option value="Fujian">Fujian</option>
                    <option value="Gansu">Gansu</option>
                    <option value="Guangdong">Guangdong</option>
                    <option value="Guangxi">Guangxi</option>
                    <option value="Guizhou">Guizhou</option>
                    <option value="Hainan">Hainan</option>
                    <option value="Hebei">Hebei</option>
                    <option value="Henan">Henan</option>
                    <option value="Heilongjiang">Heilongjiang</option>
                    <option value="Hubei">Hubei</option>
                    <option value="Hunan">Hunan</option>
                    <option value="Jilin">Jilin</option>
                    <option value="Jiangsu">Jiangsu</option>
                    <option value="Jiangxi">Jiangxi</option>
                    <option value="Liaoning">Liaoning</option>
                    <option value="Inner Mongoria">Inner Mongoria</option>
                    <option value="Ningxia">Ningxia</option>
                    <option value="Qinghai">Qinghai</option>
                    <option value="Shandong">Shandong</option>
                    <option value="Shanxi">Shanxi</option>
                    <option value="Shaanxi">Shaanxi</option>
                    <option value="Shanghai">Shanghai</option>
                    <option value="Sichuan">Sichuan</option>
                    <option value="Tianjing">Tianjing</option>
                    <option value="Tibet">Tibet</option>
                    <option value="Xinjiang">Xinjiang</option>
                    <option value="Yunnan">Yunnan</option>
                    <option value="Zhejiang">Zhejiang</option>
                    <option value="Chongqing">Chongqing</option>
                    <option value="Macao">Macao</option>
                    <option value="Hong Kong">Hong Kong</option>
                    <option value="Taiwan">Taiwan</option> -->
                </select>
            </div>
            <div class="userinfo-item">
                <label class="userinfo-item-icon">
                    <i class="fa-solid fa-city"></i>
                </label>
                <label class="userinfo-item-tag">
                    City:
                </label>
                <label class="userinfo-item-var" id="city">
                    ${sessionScope.loginAccount.city}
                </label>
                <select class="input-fix" id="fix-city" name="city">
                    <option value="">--请选择--</option>
                </select>
            </div>
            <div class="userinfo-item">
                <label class="userinfo-item-icon">
                    <i class="fa-solid fa-location-dot"></i>
                </label>
                <label class="userinfo-item-tag">
                    Address1:
                </label>
                <label class="userinfo-item-var" id="address1">
                    ${sessionScope.loginAccount.address1}
                </label>
                <input type="text" class="input-fix" id="fix-address1" name="address1" />
            </div>
            <div class="userinfo-item">
                <label class="userinfo-item-icon">
                    <i class="fa-solid fa-location-dot"></i>
                </label>
                <label class="userinfo-item-tag">
                    Address2:
                </label>
                <label class="userinfo-item-var" id="address2">
                    ${sessionScope.loginAccount.address2}
                </label>
                <input type="text" class="input-fix" id="fix-address2" name="address2" />
            </div>
            <div class="userinfo-item">
                <label class="userinfo-item-icon">
                    <i class="fa-solid fa-envelopes-bulk"></i>
                </label>
                <label class="userinfo-item-tag">
                    Zip:
                </label>
                <label class="userinfo-item-var" id="zip">
                    ${sessionScope.loginAccount.zip}
                </label>
                <input type="text" class="input-fix" id="fix-zip" name="zip" />
            </div>
            <div class="userinfo-item">
                <label class="userinfo-item-icon">
                    <i class="fa-solid fa-phone"></i>
                </label>
                <label class="userinfo-item-tag">
                    Phone:
                </label>
                <label class="userinfo-item-var" id="phone">
                    ${sessionScope.loginAccount.phone}
                </label>
                <input type="text" class="input-fix" id="fix-phone" name="phone" />
            </div>

<%--            <div class="userinfo-item-fix">--%>
<%--                <a href="changeForm" class="changeForm">Change <i class="fa-solid fa-right-from-bracket"></i></a>--%>
<%--            </div>--%>

        </div>
    </div>
</div>
<script src="js/myaccount.js"></script>
</body>


</html>

<%@ include file="../common/bottom.jsp"%>
